<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Loan Form (Using DOJO within MVC Support)</title>
	
		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
		<script type="text/javascript" djConfig="parseOnLoad:1,isDebug:1,async:1" src="../../../../dojo/dojo.js"></script>
		<script type="text/javascript">

		var loanModel; 

		require([
			'dojo/_base/kernel',
			'dojo/parser',
			'dojo/ready',
			'dojox/mvc',
			'dojox/mvc/tests/regression/models/LoanWizardModel',			
			'dojox/charting/DataChart',
			'dijit/form/TextBox',
			'dijit/form/Button',
			'dijit/form/ValidationTextBox',
			'dijit/form/NumberTextBox',
			'dojox/mvc/Group',
			'dojox/mvc/Output'
			], function(dojo, parser, ready, mvc, LoanWizardModel, DataChart){
	
			var loan_init = {
				"Name"            : "John Doe",
				"Street"          :  "",
				"City"            :  "",
				"County"          :  "",
				"State"           :  "",
				"Zip"             :  "",
				"Country"         :  "US",
				"TotalIncome"     :  "0",
				"BaseIncome"      :  "50000",
				"BonusIncome"     :  "10000",
				"TotalHousing"    :  "0",
				"HousingPercent"  :  "0",
				"Mortgage"        :  "1000",
				"Taxes"           :  "500",
				"OtherHousing"    :  "1200"
			};
			loanModel = new LoanWizardModel({ data: loan_init });
	
			function createChart() {
				var chart = new DataChart("expenseChart", {
					store: loanModel.chartStore,
					comparative: true,
					type: dojox.charting.plot2d.Pie,
					query: { "x":"*" },
					fieldName:"y"
				});
			};
			ready(createChart);
		});
			
		</script>    
	</head>
	<body class="claro" style="background-image: url(images/validating_form_pattern.png)">
	<div id="wrapper">
	<div id="header">
		<div id="navigation">
		</div>
		<div id="headerInsert">
			<h1>Big Red Loan</h1>
			<h2>The one to choose when you're in the red...</h2>
		</div>
	</div>		 
	<div id="main">
		<div id="leftNav"></div>
		<div id="mainContent">
			<h3>Borrower information</h3>
			<hr size="6" class="rule"/>
			<div class="spacer"></div>
			<div class="row">
			<div class="cell"><label for="borrowerInput">Name:</label></div>
				<div class="cell">
					<input id="borrowerInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'loanModel.Name'"/>
				</div>
			</div>
			<div class="row">
			<div class="cell"><label for="zipInput">Zipcode (try 10706):</label></div>
				<div class="cell">
				    <input id="zipInput" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.Zip'"
		               constraints="{pattern:'#'}" regExp="\d{5}" required="true" invalidMessage="Invalid Zip Code."/>
				</div>
			</div>
			<div class="row">
			<div class="cell"><label for="cityInput">City:</label></div>
				<div class="cell">
					<input id="cityInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'loanModel.City'"/>
				</div>
			</div>
			<div class="row">
			<div class="cell"><label for="countyInput">County:</label></div>
				<div class="cell">
					<input id="countyInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'loanModel.County'"/>
				</div>
			</div>
			<div class="row">
			<div class="cell"><label for="stateInput">State:</label></div>
				<div class="cell">
					<input id="stateInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'loanModel.State'"/>
				</div>
			</div>
			<div class="spacer"></div>

			<h3>Expenses</h3>
			<hr size="6" class="rule"/>
			<div class="spacer"></div>
			<table style="width:900px;">
			<tr style="width:900px;">
			<td style="width:400px;">
			<div class="row">
			<div class="cell"><label for="housing">Mortgage:</label></div>
				<div class="cell">
					<input id="housing" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.Mortgage'"/>
			</div>
			</div>
			<div class="row">
				<div class="cell">
					<label>Real Estate Taxes:</label>
				</div>
				<div class="cell">
					<input id="taxes" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.Taxes'"/>
				</div>
			</div>
			<div class="row">
			<div class="cell"><label>Other Housing:</label></div>
				<div class="cell">
					<input id="otherHousing" type="text" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.OtherHousing'"/>
				</div>
			</div>
			<div class="row">
			<div class="cell"><label for="transportation">Total Housing:</label></div>
				<div class="cell">
					<input id="totalHousing" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.TotalHousing'"/>
			</div>
			</div>
			</td>
			<td style="width:200px;">
				<div id="expenseChart" width="150" height="150" style="display:block; width: 150px; height: 150px;"></div>
			</td>
			</tr>
			</table>
			
			<h3>Income</h3>
			<hr size="6" class="rule"/>
			<div class="spacer"></div>
			<div class="row">
			<div class="cell"><label for="baseIncome">Base Income:</label></div>
				<div class="cell">
					<input id="baseIncome" type="text" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.BaseIncome'"/>
				</div>
			</div>
			<div class="row">
			<div class="cell"><label>Bonus Income:</label></div>
				<div class="cell">
					<input id="bonusIncome" type="text" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.BonusIncome'"/>
				</div>
			</div>
			<div class="row">
			<div class="cell"><label for="total">Total Income:</label></div>
				<div class="cell">
					<input id="total" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.TotalIncome'"/>
				</div>
			</div>
			<h3>Analysis</h3>
			<hr size="6" class="rule"/>
			<div class="spacer"></div>
			<div class="row">
			<div class="cell"><label for="percentHousing">Percent housing (under 33%):</label></div>
				<div class="cell">
					<input id="percentHousing" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="ref: 'loanModel.HousingPercent'"
					    invalidMessage="Housing should be less than 1/3 total expenses!"/>
				</div>
			</div>
		</div>
	</div>
	</div>
	</body>
</html>
